<template>
  <div class="internal">
    <navbar :text="$route.params.text"></navbar>
    <div class="select">
      <nav class="option">
        <li
          v-for="(item, index) in category"
          :key="index"
          @click="changeAction(item.text, index)"
          :class="{ active: value === index }"
        >
          <img :src="value === index ? item.icon : item.icon1" alt="" />
          <span>{{ item.text }}</span>
        </li>
      </nav>
      <div class="department" v-if="value === 0">
        <nav>
          <li
            v-for="(item, index) in DepartmentList"
            :key="index"
            @click="DepartmentAction(item)"
            :item="item"
          >
            {{ item }}
          </li>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "../../../components/navbar.vue";
export default {
  components: {
    navbar,
  },
  data() {
    return {
      category: [
        {
          icon: "https://cdn7.axureshop.com/demo/1763441/images/%E9%80%89%E6%8B%A9%E7%A7%91%E5%AE%A4/u353.png",
          icon1:
            "https://cdn7.axureshop.com/demo/1763441/images/%E4%B8%93%E5%AE%B6%E5%9B%A2%E9%98%9F/u994.png",
          text: "按科室挂号",
        },
        {
          icon: "https://cdn7.axureshop.com/demo/1763441/images/%E4%B8%93%E5%AE%B6%E5%9B%A2%E9%98%9F/u993.png",
          icon1:
            "https://cdn7.axureshop.com/demo/1763441/images/%E9%80%89%E6%8B%A9%E7%A7%91%E5%AE%A4/u352.png",
          text: "知名专家团队",
        },
      ],
      DepartmentList: [
        "外科",
        "内科",
        "神经科",
        "妇产科",
        "儿科",
        "内分泌科",
        "皮肤科",
        "眼科",
        "变态反应科",
        "耳鼻喉科",
        "口腔科",
        "中医科",
        "临床营养科",
        "检验科",
        "药剂科",
        "麻醉疼痛科",
        "核医学科",
        "超声介入科",
        "神经科",
        "心理医学科",
      ],
      value: 0,
      item: "",
    };
  },
  methods: {
    changeAction(text, index) {
      this.value = index;
      if (index == 1) {
        this.$router.push({
          name: "RenownedExpertTeam",
          params: { text },
        });
      }
    },
    DepartmentAction(item) {
      this.item = item;
      this.$router.push({
        name: "AppointmentRegister",
        params: { text: "预约挂号", item },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}
.select {
  position: relative;
  top: 46px;
  left: 0;
  z-index: 1;
  //   background-color: #000;
  .option {
    display: flex;
    background-color: #fff;

    li {
      width: 50%;
      height: vw(59);
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1px solid rgba(242, 242, 242, 1);
      border-bottom: 1px solid rgba(242, 242, 242, 1);
      &:first-child {
        border-right: 1px solid rgba(242, 242, 242, 1);
      }
      img {
        width: vw(18);
        height: vw(22);
      }
      span {
        font-family: "微软雅黑";
        font-weight: 400;
        font-style: normal;
        font-size: vw(14);
        color: #333;
        margin: vw(8);
      }
    }
    .active {
      background-color: #2ec7c9;

      span {
        color: #fff;
      }
    }
  }

  //按科室挂号
  .department {
    background-color: #fff;
    nav {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 50%;
        flex-shrink: 0;
        height: vw(57);
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
        box-sizing: border-box;
        font-size: vw(13);
        color: #333333;
        &:nth-child(2n - 1) {
          border-right: 1px solid rgba(242, 242, 242, 1);
        }
      }
    }
  }
}
</style>
